<!-- 点位管理 -->
<template>
  <div>
    <Tab :show-node="showNode" @searchNode="searchNode" />
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix" style="border-bottom: none">
        <el-button
          class="leftBtn"
          type="warning"
          icon="el-icon-circle-plus-outline"
          @click="addNode"
        >新增</el-button>
      </div>
      <el-table :data="list">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="点位名称" prop="name" />
        <el-table-column label="所在区域" prop="region.name" />
        <el-table-column label="商圈类型" prop="businessType.name" />
        <el-table-column label="合作商" prop="ownerName" />
        <el-table-column label="详细地址" prop="addr" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="nodeDetail(scope.row.id)">查看详情</el-button>
            <el-button type="text" @click="updateNodeFn(scope.row.id)">修改</el-button>
            <el-button type="text" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TabfooterBtn
        :params="params"
        :total-count="totalCount"
        :total-page="totalPage"
        @nextPageFn="pageFn"
        @prevPageFn="pageFn"
      />
    </el-card>
    <NodeDialog ref="nodeDialogRef" :node-visible="nodeVisible" @close="close" @addNodeFn="addNodeFn" />
    <!-- 点位详情弹窗 -->
    <el-dialog :visible="isVisible" title="点位详情" @close="isVisible=false">
      <el-table :data="dialogList">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="机器编号" prop="innerCode" />
        <el-table-column label="设备状态" prop="vmStatus">
          <template #default="scope">

            {{ statusType[+scope.row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="最后一次供货时间" prop="lastSupplyTime">
          <template #default="scope">

            {{ formatDate(scope.row.lastSupplyTime) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Tab from './components/header.vue'
import NodeDialog from './components/nodeDialog.vue'
import dayjs from 'dayjs'
import { nodeSearch, nodeDetail } from '@/api'
export default {
  components: {
    Tab,
    NodeDialog
  },
  data() {
    return {
      showNode: true,
      isVisible: false,
      list: [],
      totalCount: 0,
      totalPage: 0,
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      nodeVisible: false,
      dialogList: [],
      statusType: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      }
    }
  },
  created() {
    this.fetchNode(this.params)
  },
  methods: {
    // 渲染表格数据
    async fetchNode(obj) {
      const { data } = await nodeSearch(obj)
      this.list = data.currentPageRecords.map((item, index) => {
        item.addr = item.addr.split('-')[3]
        return item
      })
      // console.log(data)
      this.totalCount = +data.totalCount
      this.totalPage = +data.totalPage
    },
    // 切换页面
    pageFn(val) {
      this.params.pageIndex = val
      this.fetchNode(this.params)
    },
    // 搜索页面渲染数据
    searchNode(obj) {
      this.fetchNode({
        ...this.params,
        ...obj
      })
    },
    // 新增页面打开
    addNode() {
      this.nodeVisible = true
    },
    close() {
      this.nodeVisible = false
    },
    // 新增页面渲染
    addNodeFn() {
      this.fetchNode(this.params)
    },
    // 修改页面
    updateNodeFn(id) {
      // console.log(id)
      this.nodeVisible = true
      // console.log(this.$refs.nodeDialogRef)
      this.$refs.nodeDialogRef.updataOpenFn(id)
    },
    // 查看详情
    async nodeDetail(id) {
      this.isVisible = true
      const res = await nodeDetail(id)
      // console.log(res)
      this.dialogList = res.data
    },
    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY.MM.DD HH:mm:ss')
    }
  }
}
</script>
<style lang='scss' scoped>
.clearfix {
  .leftBtn {
    float: left;
    padding: 3px 0;
    height: 40px;
    width: 100px;
  }
}
::v-deep .el-card__header {
  border-bottom: none;
}
::v-deep .el-dialog__header {
  background: #fff;
  .el-dialog__title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
  }
}
::v-deep .el-icon-close:before {
  /* color: #fff; */
  color: #909399;
}
</style>
